<template>
	<!-- 产品-->
	<div class="container-fluid fruite py-5">
		<div class="container py-5 ">
			<div class="tab-class text-center">
				<div class="row g-4">
					<div class="col-lg-4 text-start">
						<h1>我们的有机产品</h1>
					</div>
					<!-- 胶囊式按钮开始 -->
					<div class="col-lg-8 text-end">
						<ul class="nav nav-pills d-inline-flex text-center mb-5">
							<li class="nav-item" v-for="(item,i) in optionList" :key="i">
								<a class="d-flex m-2 py-2 bg-light rounded-pill text-decoration-none"
									:class="item===curSelected?'active':''"
									@click="curSelected = item">
									<span class="text-dark" style="width: 130px;">{{item}}</span>
								</a>
							</li>
						</ul>
					</div>
					<!-- 胶囊式按钮结束 -->
				</div>
				<div class="tab-content">
					<!-- 图片开始 -->
					<div class="tab-pane fade show p-0 active">
						<div class="row g-4">
							<div class="col-lg-12">
								<div class="row g-4">
									<!-- 第一组第一张 -->
									<div class="col-md-6 col-lg-4 col-xl-3" v-for="(item,i) in curProductList" :key="i">
										<div class="rounded position-relative fruite-item">
											<div class="fruite-img">
												<img :src="item.img" class="img-fluid w-100 rounded-top" alt="">
											</div>
											<div class="text-white bg-warning px-3 py-1 rounded position-absolute"
												style="top: 10px; left: 10px;">Fruits</div>
											<div class="p-4 border border-secondary border-top-0 rounded-bottom">
												<h4>{{item.name}}</h4>
												<p>
													{{item.spec}}
												</p>
												<div class="d-flex justify-content-between flex-lg-wrap">
													<p class="text-dark fs-5 fw-bold mb-0">¥{{item.price}} / {{item.unit}}</p>
													<a href="#" class="btn border border-secondary rounded-pill px-3 text-warning">
														添加到购物车
													</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				optionList: ['全部', '推荐', '健康', '热门', '其他'],
				curSelected: "全部",
				productList: [{
						id: 1,
						name: "香蕉",
						spec: "香蕉中糖分含量高，食用之后可以迅速为机体补充能量，香蕉中含有的镁元素也有消除疲劳的效果，富含维生素C、钾等营养物质",
						img: "/fruite/index/images/fruite-item-3.jpg",
						price: 14.99,
						unit: "kg",
						isRecommend: true,
						isHot: false,
						isHealth: false,
					},
					{
						id: 2,
						name: "覆盆子",
						spec: "覆盆子含有大量的维生素A和类黄酮，覆盆子含有大量的维生素A和类黄酮，可以直接食用。减轻炎症反应和相关疾病",
						img: "/fruite/index/images/fruite-item-2.jpg",
						price: 24.99,
						unit: "kg",
						isRecommend: true,
						isHot: false,
						isHealth: false,
					},
					{
						id: 3,
						name: "橙子",
						spec: "橙子中的维生素C和其他抗氧化剂有助于抵抗自由基的损害。提高身体对疾病的抵抗力，助于抵抗自由基的损害，减缓衰老过程",
						img: "/fruite/index/images/fruite-item-1.jpg",
						price: 14.99,
						unit: "kg",
						isRecommend: false,
						isHot: false,
						isHealth: true,
					},
					{
						id: 4,
						name: "杏",
						spec: "杏中富含的维生素E和钾等营养物质有助于促进血液循环，降低血压，预防心血管疾病的发生，助于促进血液循环",
						img: "/fruite/index/images/fruite-item-4.jpg",
						price: 42.99,
						unit: "kg",
						isRecommend: false,
						isHot: true,
						isHealth: false,
					},
					{
						id: 5,
						name: "葡萄",
						spec: "葡萄中的多酚类化合物被认为对心血管系统有益。它们有助于降低血压、改善血液循环，减少心脏病和中风的风险。",
						img: "/fruite/index/images/fruite-item-5.jpg",
						price: 41.99,
						unit: "kg",
						isRecommend: false,
						isHot: true,
						isHealth: false,
					},
					{
						id: 6,
						name: "苹果",
						spec: "苹果中的一些化合物具有抗炎特性，可以减轻炎症反应和相关疾病的症状。苹果中的膳食纤维有助于稳定血糖水平",
						img: "/fruite/index/images/fruite-item-6.jpg",
						price: 34.99,
						unit: "kg",
						isRecommend: false,
						isHot: false,
						isHealth: true,
					},
					{
						id: 7,
						name: "蓝莓",
						spec: "蓝莓富含维生素C和其他营养物质，有助于增强免疫系统的功能，提高身体对疾病的抵抗力，助控制食欲和血糖水平",
						img: "/fruite/index/images/fruite-item-7.jpg",
						price: 54.99,
						unit: "kg",
						isRecommend: false,
						isHot: false,
						isHealth: false,
					},
					{
						id: 8,
						name: "草莓",
						spec: "草莓中的多酚类化合物被认为对心血管系统有益。它们有助于降低血压、改善血液循环，减少心脏病和中风的风险",
						img: "/fruite/index/images/fruite-item-8.jpg",
						price: 64.99,
						unit: "kg",
						isRecommend: false,
						isHot: false,
						isHealth: false,
					},
				]
			}
		},
		computed: {
			curProductList() {
				return this.productList.filter(item => {
					switch (this.curSelected) {
						case '全部':
							return true;
							break;
						case '推荐':
							return item.isRecommend == true;
							break;
						case '健康':
							return item.isHealth == true;
							break;
						case '热门':
							return item.isHot == true;
							break;
						case '其他':
							return !item.isRecommend && !item.isHealth && !item.isHot;
							break;
					}
				})
			}
		}
	}
</script>

<style scoped>
	.fruite .tab-class .nav-item a.active {
		background: rgb(254, 130, 6) !important;
	}

	.fruite .tab-class .nav-item a.active span {
		color: white !important;
	}

	.fruite .tab-content a:hover {
		background-color: #ff983d;
		color: white !important;
	}

	.fruite .fruite-item {
		transition: 0.5s;
		border-color: #ff983d;
	}

	.fruite .fruite-item:hover {
		box-shadow: 0 0 55px rgb(241, 168, 50);
	}

	.fruite .fruite-item .fruite-img {
		overflow: hidden;
		transition: 0.5s;
		border-radius: 10px 10px 0 0;
	}

	.fruite .fruite-item .fruite-img img {
		transition: 0.5s;
		height: 200px;
	}

	.fruite .fruite-item .fruite-img img:hover {
		transform: scale(1.3);
	}	
</style>